<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1. 写一个canvs标签， width,height 控制宽高 -->
    <canvas id="cvs" width="800" height="600"></canvas>
    <!-- 2.使用js进行绘制 -->
    <script>
        // 2.1 要先获取 cavnas 标签
        let cvs = document.getElementById('cvs')
        // 2.2 从cavnas身上得到一支画笔
        let context = cvs.getContext('2d')
        // // 2.3 调用 context的方法进行绘制
        // context.beginPath()
        // // context.arc(圆心的x,圆心的y,圆的半径,从哪个角度开始,到哪个角度结束)
        // // 2.4 告诉笔要画一个圆，位置和半径
        // context.arc(400, 300, 100, 0, 2 * Math.PI)
        // // 2.5 开始填充颜色
        // context.closePath()
        // // 如果想控制颜色， 在 fill 之前告诉它 
        // context.fillStyle = 'red'
        // context.fill()

        let x = 0, y = 0;
        // 3.让圆动起来
        setInterval(() => {

            context.fillStyle = 'rgba(0,0,0,.1)';
            context.fillRect(0, 0, 800, 600);

            // 2.3 调用 context的方法进行绘制
            context.beginPath()
            x += 2
            y += 2
            // context.arc(圆心的x,圆心的y,圆的半径,从哪个角度开始,到哪个角度结束)
            // 2.4 告诉笔要画一个圆，位置和半径
            context.arc(x, y, 20, 0, 2 * Math.PI)
            // 2.5 开始填充颜色
            context.closePath()
            // 如果想控制颜色， 在 fill 之前告诉它 
            context.fillStyle = 'red'
            context.fill()


            // 先把原来的擦除
            // context.clearRect(0, 0, 800, 600)
        }, 30)
    </script>
</body>

</html>